<template>
  <div class="content-nav personContent">
    <el-container>
      <div class=".innerSideNav">
        <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" router unique-opened>
          <el-submenu
            :index="content.title"
            v-for="content in $store.state.collectionNames"
            :key="content.title"
          >
            <template slot="title">
              <div @click="getRes(content.title)">
                <i class="el-icon-s-management"></i>
                <span>{{content.title}}</span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="res in content.body"
                :key="res.id"
                @click="showCurRes(res)"
                :index="res.id + 'editorContent'"
                :route="'/editorContent/' + res.collectionName + '/' + res.id"
              >
                <i class="el-icon-document"></i>
                <span slot="title">{{getResName(res.title)}}</span>
              </el-menu-item>
              <el-menu-item
                :index="content.title + 'writeContent'"
                :route="'/writeContent/' + content.title"
              >
                <i class="el-icon-document"></i>
                <span slot="title">创建文章</span>
              </el-menu-item>
              <el-menu-item @click="collectionDelete(content.title)">
                <i class="el-icon-delete"></i>
                <span slot="title">删除文集</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item @click="openCreateResource" style="padding: 0">
            <i class="el-icon-plus" v-if="create && isCollapse"></i>
            <span slot="title" v-if="create">
              <i class="el-icon-plus" v-if="!isCollapse" style="margin-left: 20px"></i>
              新建文集
            </span>
            <el-input v-model="collectionName" placeholder="请输入文集名称" v-else>
              <el-button
                slot="append"
                icon="el-icon-check"
                @click="createResource"
                style="padding-left: 10px; padding-right: 10px"
              ></el-button>
            </el-input>
          </el-menu-item>
          <el-menu-item @click="isCollapse = !isCollapse" v-if="create">
            <i class="el-icon-s-unfold"></i>
            <span slot="title">展开</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="line" tabindex="0" outline="0" @focus="onInputBlur">
        <el-main style="min-height: 77vh">
          <router-view></router-view>
        </el-main>
      </div>
    </el-container>
    <Footer/>
  </div>
</template>
<script>
import Footer from "@/components/subComponents/Footer";
import { myMixin } from "@/assets/js/mixin";

export default {
  mixins: [myMixin],
  components: {
    Footer
  },
  data() {
    return {
      isCollapse: true,
      collectionName: "",
      create: true,
      size: 5
    };
  },
  methods: {
    openCreateResource() {
      this.isCollapse = false;
      this.create = false;
    },
    createResource() {
      if (this.collectionName == "" || this.collectionName == null) {
        this.$message("文集不能为空");
        return;
      }
      if (this.collectionName.length > this.size) {
        this.$message("文集长度不能超过" + this.size);
        return;
      }
      for (const key in this.$store.state.collectionNames) {
        const e = this.$store.state.collectionNames[key];
        if (e.title == this.collectionName) {
          this.$message("已存在同名文集");
          return;
        }
      }

      this.$store.commit("addCollectionName", this.collectionName);
      this.collectionName = "";
      this.isCollapse = true;
      this.create = true;
    },
    collectionDelete(name) {
      this.$confirm("是否删除文集: " + name, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$store.commit("deleteCollectionName", name);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    onInputBlur() {
      this.isCollapse = true;
      this.create = true;
    },
    showCurRes(res) {
      this.$store.commit("setResource", res);
    },
    getRes(title) {
      for (const key in this.$store.state.collectionNames) {
        const e = this.$store.state.collectionNames[key];
        if (e.title == title) {
          // if (e.body.length == 0) {
            this.$axios
              .get(
                this.$const.domain + "/v1/content/getResource?title=" + title,
                { headers: this.headers }
              )
              .then(res => {
                if (res.data.code == 200) {
                  if (res.data.data.length > 0){
                    this.$store.commit("setCollectionBody", res.data.data);
                  }
                }
              });
          // }
        }
      }
    },
    getResName(title) {
      if(title.length > 6 && !this.isCollapse) {
        return title.substring(0, 6) + ".."
      }
      return title
    }
  },
  mounted() {
    this.$axios
      .get(this.$const.domain + "/v1/content/getCollectionNames", {
        headers: this.headers
      })
      .then(res => {
        if (res.data.code == 200) {
          if (res.data.data.length > 0) {
            this.$store.commit("setCollectionNames", res.data.data);
          }
          return;
        }
        this.$message(res.data.msg);
      });
  }
};
</script>